<template>
	<div class="extends-container">
		<div class="extends-header">
			<ToolBar />
		</div>
		<div class="extends-search">
			<SearchAction />
		</div>
		<div class="extends-body">
			<LeftSide />
			<MidSide />
			<RightSide @openDrawer="openDrawer" />
		</div>
	</div>
	<!-- 抽屉模块开始 -->
	<el-drawer v-model="drawerActivity" size="700px" :direction="'rtl'">
		<template #title>
			<h4>{{title}}</h4>
		</template>
		<template #default>
      <div class="activity-container">
        <iframe :src="url" frameborder="0" width="100%" height="100%" data-v-deb5d78c=""></iframe>
      </div> 
		</template>
	</el-drawer>
	<!-- 抽屉模块结束 -->
	<!-- 弹窗模块开始 -->
	<!-- 弹窗模块结束 -->
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import ToolBar from './modules/Toolbar.vue';
import LeftSide from './modules/LeftSide.vue';
import MidSide from './modules/MidSide.vue';
import RightSide from './modules/RightSide.vue';
import SearchAction from './modules/SearchAction.vue';
export default defineComponent({
	name: 'extends-layout-page',
	components: {
		ToolBar,
		LeftSide,
		MidSide,
		RightSide,
		SearchAction,
	},
  
	setup() {
		const state = reactive({
      title: 'IP地址查询',
      drawerActivity: false,
      url: 'https://ip.cn'
    });
		const openDrawer = (str:string) => {
      if(str==='IP地址查询'){
        state.url='https://ip.cn'
      }else if(str==='时间戳'){
        state.url='https://tool.lu/timestamp'
      }else if(str==='二维码'){
        state.url='https://www.liantu.com'
      }else if(str==='翻译'){
        state.url='https://www.iciba.com'
      }
      state.title=str
      state.drawerActivity=true
    };
		return {
			...toRefs(state),
      openDrawer
		};
	},
});
</script>
<style lang="scss" scoped>
.extends-header {
	width: 100%;
	height: 60px;
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	padding: 0 10px;
}
.extends-container {
	scroll-snap-type: y mandatory;
	scroll-padding: 60px;
	overflow: scroll;
	height: 100vh;
}
.extends-search {
	width: 100%;
	height: 150px;
	box-sizing: border-box;
	margin: 10px 0;
}
.extends-body {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-column-gap: 10px;
	align-items: center;
	box-sizing: border-box;
	padding: 10px;
}
</style>
